<template>
	<view class="mydetail-body">
		<view class="tn-safe-area-inset-bottom tn-margin-bottom-sm min-height-20 liuyan-content-view">
			<view class="content-item-view tn-border-solid-bottom" v-for="(item,index) in tongzhiList" :key="index">
				    <view class=" logo-pic tn-flex tn-flex-col-center">
						<tn-avatar :src="getAvatar(item)"></tn-avatar>
				    </view>
		        <view class="conteit-right-view" @click="showDetail(item)">
		          <view class="">
		            <view class="tn-padding-right tn-color-black">
						<view class="tn-padding-right tn-padding-left-sm tn-text-sm tn-flex tn-flex-row-between">
						  <view class="">
						  	{{item.isMySend?'我':loginType==1?item.parentName:item.teacherName}}
						  </view> 
							<view class="tn-text-right ">{{item.messageTime}}</view>
						</view>
		              <view class="tn-padding-right tn-padding-top tn-padding-left-sm tn-text-sm">
		                <view class="content-span-t tn-color-grey"> {{item.content}}</view>
		              </view>
		            </view>
		          </view>
		        </view>
			</view>
		</view>
		<view class="input-bottom-view">
			
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left tn-padding-right">
				<view class="justify-content-item tn-flex-1 tn-padding-right-sm">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left">
						<tn-input class="fullwidth" type="text" v-model="huifuStr" placeholder="请输入" border></tn-input>
					</view>
				</view>
				<view class="justify-content-item ">
					<view class="tn-flex tn-flex-col-center tn-flex-row-right">
						<tn-button shape="round" @click="fasongliuyan()" :disabled="!huifuStr.length" :backgroundColor="huifuStr.length?'#01BEFF':'#D8E5FF'" fontColor="#ffffff">发送</tn-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
		export default {
			name: 'liuyan',
			data(){
				return {
					avatarUrl: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
					tongzhiList: [],
					options: [
					  {
						icon: 'delete',
						style: {
						  backgroundColor: '#E83A30',
						  width: '80rpx',
						  height: '80rpx',
						  margin: '0 12rpx',
						  borderRadius: '100rpx'
						}
					  }
					],
					showpopup: false,
					isshowPOP: true,
					msgList: [1,2,3,4,5],
					huifuStr: '',
					totalPage: 1,
					pageIndex: 1,
					liuyanDetail:{},
					imageTitle: '',
					loginType: 1,
				}
			},
			mounted() {
				this.loginType = uni.getStorageSync('loginType');
				this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
				let liuyanDetail = uni.getStorageSync('liuyanDetail');
					console.log(liuyanDetail)
				if(liuyanDetail){
					this.liuyanDetail = liuyanDetail;
					uni.setNavigationBarTitle({ title: liuyanDetail.name });
				}
				this.getLiulan();
			},
			methods:{
				deleteTongzhi(item){
					
				},
				gofabu(){
					uni.navigateTo({
						url:'/pages/my/fabutongzhi'
					})
				},
				getAvatar(item){
					if(this.loginType == 1){
						if(item.isMySend){
							return this.imageTitle+item.teacherPortrait;
						}else{
							return this.imageTitle+item.parentPortrait;
						}
					}else{
						if(item.isMySend){
							return this.imageTitle+item.parentPortrait;
						}else{
							return this.imageTitle+item.teacherPortrait;
						}
					}
					return '';
				},
				closedPopup(){
					this.showpopup = false;
					this.isshowPOP = false;
					this.$nextTick(() => {
						this.isshowPOP = true;
					})
				},
				showDetail(){
					this.showpopup = true;
				},
				async fasongliuyan(){
					let cresult = await this.contentCheck.checkRequest(2, this.huifuStr)
					if(!cresult){
						return
					}
					this.request({
						url: '/Conversation/Send',
						method: 'post',
						params: {
							conversationId: this.liuyanDetail.conversationId,
							targetId: this.liuyanDetail.targetId,
							content: this.huifuStr
						}
					}).then(res => {
						if(res.code == 200){
							if(res.data.conversationId){
								this.liuyanDetail.conversationId = res.data.conversationId;
							}
							this.huifuStr = '';
							this.getLiulan();
						}
					})
				},
				getLiulan(){
					
					this.request({
						url: '/Conversation/History',
						method: 'get',
						params: {
							conversationId: this.liuyanDetail.conversationId
						}
					}).then(res => {
						if(res.code == 200){
							this.tongzhiList = res.data;
						}
					})
				},
			},
		}
</script>

<style lang="scss" scoped>
	.mydetail-body{
		
		height: 100vh;
			  background-color: rgba(245, 245, 245, 1);
			  overflow-y: auto;
	}
	.body-v-class{
		height: 90vh;
	}
	.tn-swipe-action-item{
		border-bottom: 1px solid #dddddd;
	}
  .fabu__btn{
	  position: fixed;
	  bottom: 30%;
	  right: 10px;
  }
  .popup-content{
	  position: relative;
	  height: 100%;
  }
  .tongzhi-pop-content{
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 200rpx;
	  overflow-y: auto;
  }
  .opo-bottom-btn{
	  position: absolute;
	  bottom: 20rpx;
	  left: 50%;
	  margin-left: -100rpx;
  }
  .pop-item{
	  font-size: 14px;
  }
  .pop-input-view{
	position: absolute;
	width: 100%;
	bottom: 100rpx;
  }
  .min-height-20{
	  min-height: 20px;
  }
  .liuyan-content-view{
	  overflow-y: auto;
	  padding-bottom: 50px;
  }
  .content-span-t{
	  
  }
  .input-bottom-view{
	  position: fixed;
	  bottom: 10px;
	  left: 0;
	  right: 0;
  }
  .content-item-view{
	  min-height: 60px;
	  position: relative;
	  overflow: hidden;
	  padding: 10px;
  }
  .logo-pic{
	  
	  	float: left;
  }
  .conteit-right-view{
	  margin-left: 60px;
  }
  .fullwidth{
	  width: 100%;
  }
</style>